<link rel="stylesheet" type="text/css" href="__CSS__/HMW.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />

{include file="index/canvas_structure" /}


<div style="width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 130px;position: relative;margin-left: 45%;">
        HMW

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">
                以How might we（我们应该如何）的句式开头，寻找解决问题的方向，不断扩展需要解决的问题，寻找创新机会点。
            </span>
        </div>

    </div>
</div>



<!--WHO;需要(Gain);因为(Pain)-->
<div style="font-size: 18px;margin:10px 0 0 240px;">
    <text class="title">
        <b>WHO:<text style="color: red;">*</text></b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
        <input id="newTargetUser" class="extraInfoInput" oninput="
            var data = new Object();
            data.toolId = '{$toolId}';
            data.info =$(this).val();
            data.type = 'changeTargetUser';
            ws.send(JSON.stringify(data));"
               value="{$targetUser}" maxlength="100" placeholder="(点击此处输入目标用户)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

        <!--<div class="tooltiptext" style="">修改需要解决的问题</div>-->
    </div>
</div>

<div style="font-size: 18px;margin:10px 0 0 240px;">
    <text class="title">
        <b>需要(Gain):</b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
    <input id="newGain" class="extraInfoInput" oninput="
            var data = new Object();
            data.toolId = '{$toolId}';
            data.info =$(this).val();
            data.type = 'changeGain';
            ws.send(JSON.stringify(data));"
           value="{$gain}" maxlength="100" placeholder="(点击此处输入Gain)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

    <!--<div class="tooltiptext" style="">修改需要解决的问题</div>-->
    </div>
</div>

<div style="font-size: 18px;margin:10px 0 0 240px;">
    <text class="title">
        <b>因为(Pain):</b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
    <input id="newPain" class="extraInfoInput" oninput="
            var data = new Object();
            data.toolId = '{$toolId}';
            data.info =$(this).val();
            data.type = 'changePain';
            ws.send(JSON.stringify(data));"
           value="{$pain}" maxlength="100" placeholder="(点击此处输入Pain)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

    <!--<div class="tooltiptext" style="">修改需要解决的问题</div>-->
    </div>
</div>



<!--具体条目分块-->
<!--1.HMW-->
<div class="table_row_main" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;">

    {volist name="types" id="t" offset="0" length="1"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  >
        <div class="title">
            <text>{$t.type_name}</text>
            <!--<div class="tooltip ">
                <span class="tooltiptext">目标用户的 Hear <br/>会影响到他的人怎么说</span>

            </div>-->
        </div>


        <div class="msg"  id="msg_{$t.id}">
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}


            {include file="index/business_canvas_template" /}


            {/if}
            {/volist}
        </div>


        <button style="position:relative;width: 450px;height: 100px;font-size: 16px;margin:50px 0 0 30px;border-color:#D9D9D9;padding:0;" class="addBtn button button-border" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
            <div style="position:absolute;top:15%;left: 40%;height: 70px;width: 70px;" class="add_prj"></div>
        </button>


    </div>

    {/volist}
</div>




</div><!--closing tag for wholeCanvas div-->









<script>

    //点击除输入框以外的任意位置，更改目标用户、gain和pain
    var oldTargetUser = '{$targetUser}';
    $(document).click(function(e){
        var _con = $('#newTargetUser');   // 设置目标区域

        var newTargetUser = $('#newTargetUser').val();
        var toolId = '{$toolId}';

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            if(newTargetUser != oldTargetUser) {

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/changeHMWUser",
                    data: {
                        toolId: toolId,
                        newTargetUser: newTargetUser
                    },
                    success: function (result) {
                        oldTargetUser = newTargetUser;

                        toastr.info('修改已自动保存~');
                        setTimeout(function () {
                            toastr.clear();
                        }, 4000);
                        //console.log(result);
                        //window.location.reload();
                    }
                });
            }
        }
    });


    var oldGain = '{$gain}';
    $(document).click(function(e){
        var _con = $('#newGain');   // 设置目标区域

        var newGain = $('#newGain').val();
        var toolId = '{$toolId}';

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            if(newGain != oldGain) {

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/changeHMWGain",
                    data: {
                        toolId: toolId,
                        newGain: newGain
                    },
                    success: function (result) {
                        oldGain = newGain;

                        toastr.info('修改已自动保存~');
                        setTimeout(function () {
                            toastr.clear();
                        }, 4000);
                        //console.log(result);
                        //window.location.reload();
                    }
                });
            }
        }
    });


    var oldPain = '{$pain}';
    $(document).click(function(e){
        var _con = $('#newPain');   // 设置目标区域

        var newPain = $('#newPain').val();
        var toolId = '{$toolId}';

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            if(newPain != oldPain) {

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/changeHMWPain",
                    data: {
                        toolId: toolId,
                        newPain: newPain
                    },
                    success: function (result) {
                        oldPain = newPain;

                        toastr.info('修改已自动保存~');
                        setTimeout(function () {
                            toastr.clear();
                        }, 4000);
                        //console.log(result);
                        //window.location.reload();
                    }
                });
            }
        }
    });



    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);




</script>